.slide-down-enter,.slide-down-leave-to{ //浏览器屏幕y轴向上是负方向,也就是说-100%是在原位置上方
    transform: translate3d(0,-100%,0);// 进来时的位置: x轴方向在原位置，y轴在-100%位置, z轴方向在原位置
                                      //离开后到达的位置:  x轴方向在原位置，y轴在-100%位置, z轴方向在原位置
}
.slide-down-enter-to, .slide-down-leave 
.slide-up-enter-to, .slide-up-leave { 
    transform: translate3d(0,0,0); //进来到达的位置: x,y,z轴都在原位置
                                    //刚要离开的位置: x,y,z轴都在原位置
}
.slide-up-enter, .slide-up-leave-to { //浏览器屏幕y轴向下是正方向,也就是说px2rem(138)是在原位置下方
    transform: translate3d(0,px2rem(138),0);  //进来时的位置: x轴方向在原位置，y轴在px2rem(138)位置, z轴方向在原位置
                                            //离开后到达的位置:  x轴方向在原位置，y轴在px2rem(138)位置, z轴方向在原位置
                                            //之所以设置138是因为菜单和菜单设置两者高度相加为138
}
.slide-down-enter-active, .slide-down-leave-active ,
.slide-up-enter-active, .slide-up-leave-active,
.popup-slide-up-enter-active, .popup-slide-up-leave-active,
.fade-enter-active, .fade-leave-active,
.fade-slide-right-enter-active, .fade-slide-right-leave-active { 
    transition: all .2s linear; // all表示所有的css属性都拥有过渡，过渡时间为0.2s，执行匀速触发函数。
}

.popup-slide-up-enter, .popup-slide-up-leave-to {  
    transform: translate3d(0,100%,0);
    opacity: 0;
}
.popup-slide-up-enter-to, .popup-slide-up-leave { 
    transform: translate3d(0,0,0);
    opacity: 1;
}

.fade-enter, .fade-leave-to { 
    opacity: 0;
}

.fade-enter-to, .fade-leave { 
    opacity: 1;
}

.fade-slide-right-enter-to, .fade-slide-right-leave { 
    transform: translate3d(0,0,0);
    opacity: 1;
}

.fade-slide-right-enter, .fade-slide-right-leave-to {
    transform: translate3d(-100%,0,0);
}